import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:macnov/common/empty_data.dart';
import 'package:macnov/models/summary.dart';
import 'package:macnov/pie/PieChartWidget.dart';
import 'package:macnov/stores/wallet.dart';
import 'package:macnov/utils/colorUtil.dart';

class SummaryPie extends StatefulWidget {
  @override
  _SummaryPieState createState() => _SummaryPieState();
}

class _SummaryPieState extends State<SummaryPie> {
  List<Color> colors = [
    ColorsUtil.hexColor(0x76B6E9),
    ColorsUtil.hexColor(0x7EC0EE),
    ColorsUtil.hexColor(0x6495ED),
    ColorsUtil.hexColor(0x8085e9),
    ColorsUtil.hexColor(0xe1e1e1),
    ColorsUtil.hexColor(0xe4d354),
    ColorsUtil.hexColor(0x76B6E9),
    ColorsUtil.hexColor(0x7EC0EE),
    ColorsUtil.hexColor(0x6495ED),
    ColorsUtil.hexColor(0x8085e9),
    ColorsUtil.hexColor(0xe1e1e1),
    ColorsUtil.hexColor(0xe4d354),
    ColorsUtil.hexColor(0x76B6E9),
    ColorsUtil.hexColor(0x7EC0EE),
    ColorsUtil.hexColor(0x6495ED),
    ColorsUtil.hexColor(0x8085e9),
    ColorsUtil.hexColor(0xe1e1e1),
    ColorsUtil.hexColor(0xe4d354),
    ColorsUtil.hexColor(0x76B6E9),
    ColorsUtil.hexColor(0x7EC0EE),
    ColorsUtil.hexColor(0x6495ED),
    ColorsUtil.hexColor(0x8085e9),
    ColorsUtil.hexColor(0xe1e1e1),
    ColorsUtil.hexColor(0xe4d354),
  ];

  String _currentCategory;

  MonthPaymentCategoryModel model;

  @override
  void initState() {
    super.initState();
  }

  _buildPieChart(angles, contents) {
    
    return Container(
        padding: EdgeInsets.only(top: 20),
        child: PieChartWidget(angles, colors,
            startTurns: .0,
            radius: MediaQuery.of(context).size.width / 2 * 0.9,
            contents: contents,
            model: model));
  }

  @override
  Widget build(BuildContext context) {
    var monthlyCategoriess = walletStore.monthlyCategoriess;
    if (monthlyCategoriess.length == 0) return Container();
    var angles = monthlyCategoriess.map((item) => item.percent).toList();
    var contents = monthlyCategoriess.map((item) => item.category).toList();
    if (contents.length != 0 && _currentCategory == null) {
      setState(() {
        _currentCategory = contents[0];
        model = monthlyCategoriess[0];
      });
    }

    var menus = contents.map((item) => PopupMenuItem(
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Text(item),
            ],
          ),
          value: item,
        ));

    return Column(
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(top: 20, bottom: 10),
          child: Row(
            children: <Widget>[
              Text(
                '',
                style: TextStyle(
                    color: ColorsUtil.hexColor(0x777777), fontSize: 14),
              ),
              Row(
                children: <Widget>[
                  new PopupMenuButton<String>(
                      child: Row(
                        children: <Widget>[
                          Text(
                            _currentCategory,
                            style: TextStyle(
                                color: ColorsUtil.hexColor(0x346ACA),
                                fontSize: 14),
                          ),
                          Icon(
                            Icons.arrow_drop_down,
                            color: ColorsUtil.hexColor(0x346ACA),
                          ),
                        ],
                      ),
                      onSelected: (String value) {
                        MonthPaymentCategoryModel monthPaymentCategoryModel =
                            _findSelectCategory(value);
                        if (monthPaymentCategoryModel != null) {
                          setState(() {
                            _currentCategory = value;
                            model = monthPaymentCategoryModel;
                          });
                        }
                      },
                      itemBuilder: (BuildContext context) =>
                          <PopupMenuEntry<String>>[...menus])
                ],
              ),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
          ),
        ),
        _buildPieChart(angles, contents),
      ],
    );
  }

  MonthPaymentCategoryModel _findSelectCategory(cateName) {
    return walletStore.monthlyCategoriess
        .singleWhere((item) => item.category == cateName);
  }
}
